<template>
  <div class="p24">
    <a-layout>
      <a-row class="head">
        <a-col style="cursor:pointer;width:45px" @click="goback"> <a-icon type="left" />返回 </a-col>
      </a-row>
      <!-- 个人信息 -->
      <a-row>
        <div class="baseInfo-box">
          <div class="left">
            <div class="avatar">
              <a-avatar v-if="empPhoto !== null" :key="empPhoto" :src="empPhoto" :size="64" />
              <a-avatar v-else icon="user" :size="64" />
            </div>
            <div class="baseInfo">
              <div class="name">{{ name }}</div>
              <div class="depName">
                <div class="depart">
                  部门：
                  <span>{{ depName }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="right">
            <a-select v-if="dataList.length !== 0" v-model="year" style="width: 136px" placeholder="搜索年份" @change="handleYear">
              <a-select-option v-for="item in dataYear" :key="item.year">{{ item.year }}</a-select-option>
            </a-select>
          </div>
        </div>
      </a-row>
      <a-row>
        <a-table :columns="column" :data-source="dataList" :pagination="pagination" row-key="id" @expand="expandedRowsChange">
          <template slot="yearMonth" slot-scope="text, record">
            <span>{{ record.year }}年{{ record.month }}月</span>
          </template>
          <div slot="expandedRowRender" slot-scope="text" class="expend-box" style="padding:0;margin:0;">
            <template>
              <div class="userInfo-box">
                <div class="shebaoInfo">
                  <div class="userInfo-shebaoInfo">
                    <div class="base-record">基本资料</div>
                    <div class="idCardInfo">
                      <span class="text">身份证号:</span>
                      <span class="number">{{ text.idCard }}</span>
                    </div>
                    <div class="personshebaoInfo">
                      <span class="text">个人社保号:</span>
                      <span class="number">{{ text.socCard }}</span>
                    </div>
                    <div class="sfInfo">
                      <span class="text">个人公积金号:</span>
                      <span class="number">{{ text.pfCard }}</span>
                    </div>
                    <div class="cityInfo">
                      <span class="text">参保城市:</span>
                      <span class="number">{{ text.socCityName }}</span>
                    </div>
                    <div class="methodInfo">
                      <span class="text">缴纳方案:</span>
                      <span class="number">{{ text.progName }}</span>
                    </div>
                  </div>
                </div>
                <div class="editInfo-box">
                  <a-button class="stopShebao" @click="stopShebao">
                    停止参保
                  </a-button>
                  <!-- <a-button>编辑</a-button> -->
                  <a-button>补缴</a-button>
                  <!-- <a-button>撤销参保</a-button> -->
                </div>
              </div>
              <div class="payInfo-box">
                <a-table :data-source="text.progItemListVo" :pagination="false" row-key="id">
                  <a-table-column title="缴纳项目">
                    <template slot-scope="text1">
                      <span>{{ text1.itemName }}</span>
                    </template>
                  </a-table-column>
                  <a-table-column title="缴纳基数">
                    <template slot-scope="text1">
                      <span>{{ text1.id === "1" ? "--" : text1.cardinalityDefault }}</span>
                    </template>
                  </a-table-column>
                  <a-table-column title="个人比例">
                    <template slot-scope="text1">
                      <span>{{ text1.persentPersonal === null ? "--" : text1.persentPersonal + "%" }}</span>
                    </template>
                  </a-table-column>
                  <a-table-column title="公司比例">
                    <template slot-scope="text1">
                      <span>{{ text1.persentCompany === null ? "--" : text1.persentCompany + "%" }}</span>
                    </template>
                  </a-table-column>
                  <a-table-column title="个人缴费">
                    <template slot-scope="text1">
                      <span>{{ text1.amountPersonal }}</span>
                    </template>
                  </a-table-column>
                  <a-table-column title="公司缴费">
                    <template slot-scope="text1">
                      <span>{{ text1.amountCompany }}</span>
                    </template>
                  </a-table-column>
                  <a-table-column title="缴费合计">
                    <template slot-scope="text1">
                      <span>{{ text1.amountCount }}</span>
                    </template>
                  </a-table-column>
                </a-table>
              </div>
            </template>
          </div>
        </a-table>
      </a-row>
    </a-layout>
    <a-modal title="减员月份" :visible="isStopShebao" @ok="submitStop" @cancel="handleCancel">
      <div class="cutMonth">
        <a-form :label-col="{ span: 7 }" :wrapper-col="{ span: 15 }">
          <a-form-item label="减员月份">
            <a-select v-model="monthYear" @change="handleCutMonth">
              <a-select-option v-for="item in empMonthList" :key="item.year + '-' + item.month"
                >{{ item.year }}-{{ item.month }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { checkEmpSocInfos, updateEmpSocStatus } from "@/api/shebao/shebaoInfo.js";
const column = [
  {
    title: "参保月份",
    key: "yearMonth",
    align: "center",
    scopedSlots: { customRender: "yearMonth" },
    ellipsis: true
  },
  {
    title: "个人社保费",
    dataIndex: "personalSocAmount",
    align: "center",
    ellipsis: true
  },
  {
    title: "公司社保费",
    dataIndex: "companySocAmount",
    align: "center",
    ellipsis: true
  },
  {
    title: "个人公积金费",
    dataIndex: "personalPfAmount",
    align: "center",
    ellipsis: true
  },
  {
    title: "公司公积金费",
    dataIndex: "companyPfAmount",
    align: "center",
    ellipsis: true
  }
];
export default {
  data() {
    return {
      isStopShebao: false,
      column,
      dataList: [],
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: total => `共${total}条`,
        showQuickJumper: true
      },
      progItemListVo: [],
      empId: "",
      monthYear: "",
      cutYear: "",
      cutMonth: "",
      empMonthList: [],
      id: "",
      dataYear: [],
      depName: "",
      name: "",
      progName: "",
      pfCard: "",
      socCard: "",
      idCard: "",
      socCityName: "",
      month: "",
      year: "",
      empPhoto: "",
      companyPfAmount: "",
      companySocAmount: "",
      personalPfAmount: "",
      personalSocAmount: "",
      dateOpen: false,
      searchYear: null
    };
  },
  created() {
    if (this.$route.query.id) {
      this.year = this.$route.query.year;
      this.month = this.$route.query.month;
      this.id = this.$route.query.id;
      this.empId = this.$route.query.empId;
      this.depName = this.$route.query.depName;
      this.name = this.$route.query.name;
      this.pfCard = this.$route.query.pfCard;
      this.socCard = this.$route.query.socCard;
      this.idCard = this.$route.query.idCard;
      this.socCityName = this.$route.query.socCityName;
      this.progName = this.$route.query.progName;
      this.empPhoto = this.$route.query.empPhoto;
    }
    this.getEmpInfo();
  },

  methods: {
    // 停止参保
    stopShebao() {
      this.isStopShebao = true;
    },
    // 按年搜索
    handleYear(val) {
      this.getEmpInfo();
    },
    openChange(val) {
      this.year = val.format("YYYY");
      this.getEmpInfo();
      this.dateOpen = false;
    },
    // 处理减员月份
    handleCutMonth(val) {
      this.cutMonth = this.monthYear.substring(5, 7);
      this.cutYear = this.monthYear.substring(0, 4);
    },
    handleCancel() {
      this.isStopShebao = false;
    },
    submitStop() {
      const data = {
        empId: this.empId,
        companyId: this.$store.state.hr.companyId,
        year: this.cutYear,
        month: this.cutMonth,
        empSocStatus: 2
      };
      updateEmpSocStatus(data).then(res => {
        this.$router.go(-1);
      });
      this.isStopShebao = false;
    },
    // 展开个人信息
    expandedRowsChange(expend, value) {
      this.progItemListVo = value.progItemListVo;
    },
    // 查询员工参保记录
    getEmpInfo() {
      const data = {
        year: this.year,
        empId: this.empId,
        companyId: this.$store.state.hr.companyId
      };
      checkEmpSocInfos(data).then(res => {
        this.dataList = res.data.entities;
        this.dataList.map(item => {
          if (this.empMonthList) {
            this.empMonthList = [];
            this.empMonthList.push(item);
          }
        });
        // if(this.dataYear){
        //   this.dataYear = []
        //   for(var i = 0; i < this.dataList.length; i++){
        //     for(var j = 0; j < this.dataList.length; j++){
        //       if(this.dataList[i].year === this.dataList[j].year){
        //         j = ++i
        //       }
        //     }
        //     this.dataYear.push(this.dataList[i])

        //   }
        // }
        var hash = {};
        this.dataYear = this.dataList.reduce(function(arr, current) {
          hash[current.year] ? "" : (hash[current.year] = true && arr.push(current));
          return arr;
        }, []);
      });
    },
    goback() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="less" scoped>
.head {
  margin-bottom: 20px;
}
.baseInfo-box {
  width: 100%;
  background: #fafafa;
  padding: 35px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  .left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .baseInfo {
      margin-left: 20px;
      .name {
        font-size: 18px;
        color: #252525;
        margin-bottom: 10px;
      }
      .depName {
        display: flex;
        justify-content: flex-start;
        font-size: 14px;
        color: #595959;
      }
    }
  }
}
.expend-box {
  position: relative;
  left: -60px;
  display: flex;
  justify-content: flex-start;
}
.userInfo-box {
  width: 20%;
  border-right: 1px solid #eee;
  text-align: center;
}
.userInfo-shebaoInfo {
  width: 100%;
}
.shebaoInfo {
  padding: 20px;
  .base-record {
    color: #222426;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
  }
  .idCardInfo,
  .personshebaoInfo,
  .sfInfo,
  .cityInfo,
  .methodInfo {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 8px;
    span {
      overflow: hidden;
    }
    .text {
      color: #000;
      text-align: left;
      width: 100px;
    }
    .number {
      text-align: right;
    }
  }
  .methodInfo {
    border-bottom: 1px solid #000;
    padding-bottom: 20px;
    margin-bottom: 10px;
  }
}
.editInfo-box {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 20px;
  button {
    margin-right: 6px;
    margin-bottom: 14px;
  }
}
.payInfo-box {
  width: 80%;
}
.total-pay-box {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  .totalPay {
    color: #252525;
    font-size: 14px;
    font-weight: 600;
  }
  .pay-box {
    display: flex;
    justify-content: space-between;
    .person-pay {
      margin-left: 32px;
    }
    .com-pay {
      margin-left: 80px;
    }
    .total-pay {
      margin-left: 80px;
      margin-right: 32px;
    }
  }
}
</style>
